<template>
  <el-dialog
    :model-value="dialogVisible"
    :title="$t('申请退款')"
    width="30%"
    center
    :destroy-on-close="true"
    @close="emits('closeDialog')"
  >
    <el-form :model="form" width="100%" ref="dialogFormRef">
      <el-form-item>
        <el-input
          v-model="form.amount"
          :placeholder="$t('请输入退款金额')"
          :max="form.can_refund_amount"
        />
      </el-form-item>
      <el-form-item>
          <p>{{ $t('当前可退金额') }}: {{ form.can_refund_amount }} <el-text tag="i">{{ form.currency }}</el-text></p>
      </el-form-item>
    </el-form>
    <div class="w-full flex justify-center mt-5">
      <el-button
        type="primary"
        class="w-32"
        @click="submit(form)"
        :disabled="form.amount ==''"
        >{{$t('提交退款')}}</el-button
      >
    </div>
  </el-dialog>
  <Dialog
    @closeDialog="handelGoogleCloseDialog"
    :dialogVisible="dialog"
    @callApi="handleGoogleApi"
  />
</template>
<script setup>
import { ref, reactive } from "vue";
import Dialog from "@/views/settings/components/DialogForm.vue";
import { ElMessage } from "element-plus";
import { useMerchantStore } from "@/store/modules/merchant";
const merchantStore = useMerchantStore();
const dialogFormRef = ref("");
const dialog = ref(false);
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  form: {
    type: Object,
    default: {
      amount: "",
      order_no: "",
      can_refund_amount: 0,
      currency: "",
    },
  },
});

const emits = defineEmits(["closeDialog", "submitForm"]);

// 谷歌验证码
const handelGoogleCloseDialog = () => {
  dialog.value = false;
};
//
const handleGoogleApi = (code) => {
  const param = Object.assign({}, { ...props.form, google_code: code });
  emits("submitForm", param);
};
// 提交
const submit = (dialogForm) => {
  // console.log("提交参数----", merchantStore.merchantInfo);
  dialogForm.amount = Number(dialogForm.amount);
  if (dialogForm.amount > dialogForm.can_refund_amount) {
    ElMessage({
      showClose: true,
      message: "Above the minimum refund amount",
      type: "error",
    });
    return;
  }
  if (merchantStore.merchantInfo.refund > 0) {
    dialog.value = true;
    return;
  }
  dialogFormRef.value
    .validate()
    .then(async () => {
      try {
        const param = Object.assign({}, dialogForm);
        emits("submitForm", param);
      } catch (error) {
        console.log(error);
      }
    })
    .catch((error) => {
      console.log(error);
    });
};
</script>
